﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Adding jQuery Easings</title>
<link type="text/css" href="../common/demo.css" rel="stylesheet">
<style type="text/css">
.graph { float: left; margin-left: 10px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easings.js"></script>
<script type="text/javascript" src="../common/demo.js"></script>
<script type="text/javascript">
$(function() {
	if (!$('<canvas/>')[0].getContext){
		$('<div/>').text('Your browser doesn\'t support canvas, ' +
			'which is required for this demo. Give Firefox a try!').insertAfter('h1');
		return;
	}

	var width = 100,
		height = 100;
	$('div.graph').each(function(i) {
		var graph = $(this),
		    name = graph.attr('id'),
		    impl = $.easing[name];
		if (!$.isFunction(impl)) {
			return;
		}
		var text = $('<div/>').text((i + 1) + '. ' + name).appendTo(graph),
			wrap = $('<div/>').appendTo(graph).css('overflow', 'hidden'),
			canvas = $('<canvas/>').appendTo(wrap)[0];
		canvas.width = width;
		canvas.height = height;
		var drawHeight = height * 0.8,
			cradius = 10;
			ctx = canvas.getContext('2d');
		ctx.fillStyle = 'black';

		ctx.beginPath();
		ctx.moveTo(cradius, 0);
		ctx.quadraticCurveTo(0, 0, 0, cradius);
		ctx.lineTo(0, height);
		ctx.lineTo(width - cradius, height);
		ctx.quadraticCurveTo(width, height, width, height - cradius);
		ctx.lineTo(width, 0);
		ctx.lineTo(cradius, 0);
		ctx.fill();

		ctx.strokeStyle = '#555';
		ctx.beginPath();
		ctx.moveTo(width * 0.1, drawHeight + .5);
		ctx.lineTo(width * 0.9, drawHeight + .5);
		ctx.stroke();

		ctx.beginPath();
		ctx.moveTo(width * 0.1, drawHeight * .3 - .5);
		ctx.lineTo(width * 0.9, drawHeight * .3 - .5);
		ctx.stroke();
			
		ctx.strokeStyle = 'white';
		ctx.beginPath();
		ctx.lineWidth = 2;
		ctx.moveTo(width * 0.1, drawHeight);
		$.each(new Array(width + 1), function(position) {
			var val = impl(position / width, 0, 0, drawHeight * 0.7) *
				($.support.newEasing ? drawHeight * 0.7 : 1);
			ctx.lineTo(position * 0.8 + width * 0.1, drawHeight - val);
		});
		ctx.stroke();
		graph.click(function() {
			wrap.animate({height: 'hide'}, 2000, name).delay(800).
				animate({height: 'show'}, 2000, name);
		});

		graph.width(width).height(height + text.height() + 10);
	});
});
</script>
</head>
<body>
<h1>Adding jQuery Easings</h1>
<p>Click a graph to see that easing in action.</p>
<fieldset>
	<legend>Standard</legend>
	<div class="graph" id="linear"></div>
	<div class="graph" id="swing"></div>
</fieldset>
<fieldset>
	<legend>Custom</legend>
	<div class="graph" id="bump"></div>
	<div class="graph" id="zigzag"></div>
	<div class="graph" id="runup"></div>
	<div class="graph" id="flash"></div>
</fieldset>
</body>
</html>
